<template>
	<view class="page">
		<view class="topVue">
			<view class="status"></view>
			<view class="header flex-between align-center padding-row30">
				<text>社群</text>
				<view class="flex align-center">
					<image src="../../static/association/search.png" style="width: 46rpx;height: 46rpx;"></image>
					<image src="../../static/association/bell.png" style="width: 46rpx;height: 46rpx;margin-left: 20rpx;"></image>
				</view>
			</view>
		</view>
		
		<view class="place"></view>
		
		<image src="../../static/case.png" mode="widthFix"></image>
		
		<!-- 社群类型 -->
		<!-- <view class="associationVue">
			<scroll-view scroll-x="true" class="scrollVue">
				<view class="item" v-for="(item, index) in associations" :key="index" >
					<view class="association relative">
						<view class="inner absolute-auto">
							<view class="innerest absolute-auto">
								<image src="https://jjscapp.oss-cn-beijing.aliyuncs.com/avatar/17408910309621740891026695_u=256816879,771155532&fm=253&app=120&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000.jpg" style="width: 100%; height: 100%; border-radius: 50%;"></image>
							</view>
						</view>
					</view>
					<view class="botVue">数码</view>
				</view>
			</scroll-view>
		</view> -->
		
		<!-- 社群切换 -->
		<!-- <view class="tabVue margin0">
			<scroll-view scroll-x="true" class="scrollVue">
				<view 
					class="tab" 
					v-for="(item, index) in tabs" :key="index" 
					:class="{active: current===index}"
					@click="$u.toast('功能待开发')"
				>{{ item.name}}</view>				
			</scroll-view>
		</view> -->
		
		<!-- <view class="listVue flex-wrap margin30 flex-between">
			<view class="item" v-for="(item, index) in 5" :key="index" @click="$tools.route('./detail')">
				<view class="pictrue">
					<image src="../../static/association/case.jpg" style="width: 100%; height: 100%;"></image>
				</view>
				<view class="info flex-between flex-column">
					<view class="flex align-center">
						<u-avatar src="https://jjscapp.oss-cn-beijing.aliyuncs.com/avatar/17408910309621740891026695_u=256816879,771155532&fm=253&app=120&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000.jpg" mode="circle" size="46"></u-avatar>
						<text style="color: #4B5563; padding-left: 10rpx; line-height: 1;">时尚达人</text>
					</view>
					<view class="name">夏日清爽穿搭分享</view>
					<view class="flex-between align-center">
						<view class="flex align-center">
							<image src="../../static/association/love.png" style="width: 28rpx; height: 28rpx;"></image>
							<text style="color: #4B5563; line-height: 1; padding-left: 10rpx;">255</text>
						</view>
						<view class="flex align-center">
							<image src="../../static/association/chat-round.png" style="width: 28rpx; height: 28rpx;"></image>
							<text style="color: #4B5563; line-height: 1; padding-left: 10rpx;">255</text>
						</view>
					</view>
					<view class="show flex align-center">
						<u-avatar src="https://jjscapp.oss-cn-beijing.aliyuncs.com/avatar/17408910309621740891026695_u=256816879,771155532&fm=253&app=120&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000.jpg" mode="square" size="32"></u-avatar>
						<text style="color: #4B5563; line-height: 1; padding-left: 10rpx; font-size: 26rpx;">清新连衣裙</text>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data(){
			return {
				tabs: [{ name: '推荐' }, { name: '关注' }, { name: '好物'}, { name: '家居'}, { name: '装扮'}, { name: '美妆'}, { name: '数码'}],
				current: 0,
				associations: [1,2,3,4,5,9,6,7,8]
			}
		}
	}
</script>

<style lang="less" scoped>
	.place {
		width: 100%;
		height: calc(var(--status-bar-height) + 92rpx);
	}
	.topVue {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		background: #fff;
		.header {
			width: 100%;
			height: 92rpx;
			text {
				font-size: 32rpx;
				color: #000;
				font-weight: 600;
			}
			.point {
				font-weight: 600;
				color: #4CAF50;
				padding-left: 10rpx;
			}
		}
	}
	
	.associationVue {
		width: 100%;
		height: 150rpx;
		padding: 0 30rpx;
		.scrollVue {
			width: 100%;
			height: 150rpx;
			box-sizing: border-box;
			white-space: nowrap;
			.item {
				width: 100rpx;
				height: 150rpx;
				display: inline-block;
				margin-right: 20rpx;
				.botVue {
					width: 100rpx;
					height: 50rpx;
					text-align: center;
					color: #4B5563;
					line-height: 50rpx;	
				}
				.association {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background: linear-gradient(to right, #1CC289, #60A5FA,);
					.inner {
						width: 92rpx;
						height: 92rpx;
						background: #fff;
						border-radius: 50%;
						.innerest {
							width: 84rpx;
							height: 84rpx;
							background: linear-gradient(to right, #1CC289, #60A5FA,);
							border-radius: 50%;
						}
					}
				}
			}
			.item:nth-last-child(1) {
				margin-right: 0;
			}	
		}
	}
	
	.tabVue {
		width: 100%;
		height: 66rpx;
		padding: 0 30rpx;
		.scrollVue {
			width: 100%;
			height: 66rpx;
			box-sizing: border-box;
			white-space: nowrap; 
			.tab {
				width: 150rpx;
				height: 66rpx;
				background: #F3F4F6;
				display: inline-block;
				border-radius: 30rpx;
				color: #4B5563;
				line-height: 66rpx;
				text-align: center;
				margin-right: 20rpx;
			}
			.tab:nth-last-child(1) {
				margin-right: 0;
			}
			.active {
				background: linear-gradient(to right, #1CC289, #60A5FA,);
				color: #fff;
			}
		}
	}
	
	.listVue {
		width: 690rpx;
		.item {
			width: 330rpx;
			height: 700rpx;
			background: #fff;
			border-radius: 15rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			margin-bottom: 30rpx;
			.pictrue {
				width: 330rpx;
				height: 440rpx;
				background: #f5f5f5;
			}
			.info {
				width: 330rpx;
				height: 260rpx;
				padding: 20rpx;
				.name {
					font-weight: 600;
					lighting-color: 1;
				}
				.show {
					width: 100%;
					height: 58rpx;
					background: #F9FAFB;
					border-radius: 12rpx;
				}
			}
		}
	}
</style>